<template>
  <div id="app">
    <!-- 导航栏 -->
    <div id="nav">
      <!-- logo -->
      <div class="logo">
        <router-link to="/"
          ><img src="./assets/logo.png" alt="logo"
        /></router-link>
      </div>
      <!-- 菜单 -->
      <ul class="menu">
        <li class="menu-item">
          <router-link to="/">首页</router-link>
        </li>
        <li class="menu-item">
          <router-link to="PhotoGraph">摄影图</router-link>
        </li>
        <li class="menu-item">
          <router-link to="VectorGraph">矢量图</router-link>
        </li>
        <li class="menu-item">
          <router-link to="SetLunch">超值VIP</router-link>
        </li>
      </ul>
      <!-- 登录注册 -->
      <div class="login">
        登录 / 注册
      </div>
    </div>
    <login-popup></login-popup>
    <router-view />
  </div>
</template>

<script>
import LoginPopup from "@/components/common/LoginPopup";
export default {
  components: {
    LoginPopup,
  },
};
</script>

<style lang="scss">
$navHeight: 60px;
#app {
  min-width: 1200px;
  padding-top: $navHeight;
  background-color: $mainBgColor;
  // 导航栏
  #nav {
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 900px;
    height: $navHeight;
    background-color: $mainBgColor;
    border-bottom: 1px solid #eee;
    // logo
    .logo {
      overflow: hidden;
      height: 50px;
      margin: 0 35px;
      img {
        height: 100%;
      }
    }
    // 菜单
    .menu {
      display: flex;
      align-items: center;
      .menu-item {
        padding: 0 30px;
        line-height: $navHeight;
        border-left: 1px solid #eaeded;
        font-size: 16px;
        &:last-child {
          border-right: 1px solid #eaeded;
        }
        a.router-link-exact-active {
          padding-bottom: 6px;
          border-bottom: 2px solid $mainColor;
        }
      }
    }
    // 登录注册
    .login {
      position: absolute;
      right: 0;
      top: 0;
      width: 150px;
      height: $navHeight;
      line-height: $navHeight;
      text-align: center;
      background-color: $mainColor;
      color: #fff;
      cursor: pointer;
      transition: all 0.2s;
      &:hover {
        background-color: #42ab9e;
      }
    }
  }
}
a {
  color: #2c3e50;
  &.router-link-exact-active {
    color: $mainColor;
  }
}
.el-button.is-plain:focus,
.el-button.is-plain:hover {
  border-color: $mainColor;
  color: $mainColor;
}
.el-button.is-round {
  padding: 13px 60px;
}
</style>
